import {FlatList, StyleSheet, View} from 'react-native';
import {
  Empty,
  GridThree,
  Header,
  ObserverText,
  ObserverView,
} from '../../components';
import {postThemeList} from '../../services';
import {useEffect, useState} from 'react';
import {dpw10, dpw12, dpw122, dpw8} from '../../constants';

interface ModalsProps {
  Describe: string;
  DetailImage: string;
  IconImage: string;
  Id: number;
  ThemeDetailList: any[];
  Title: string;
  Type: number;
}

const ThemeSelected = (props: any) => {
  const {navigation, route} = props;
  const {typeId} = route.params || {};
  const [modals, setModals] = useState([]);

  // 获取列表数据
  useEffect(() => {
    postThemeList({
      Type: typeId || 1,
    })
      .then((res: any) => {
        if (!Array.isArray(res?.Data)) {
          setModals([]);
        } else {
          setModals(res?.Data);
        }
      })
      .catch(() => {
        setModals([]);
      });
  }, [typeId]);

  const _randDataItem = ({item}: {item: ModalsProps}) => {
    return (
      <ObserverView
        style={{
          borderRadius: dpw8,
          marginHorizontal: dpw12,
          marginTop: dpw12,
          paddingHorizontal: dpw10,
        }}>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}>
          <ObserverText
            tKey={item.Title}
            type="model-title"
            numberOfLines={1}
            ellipsizeMode="tail"
          />
          {Array.isArray(item.ThemeDetailList) &&
          item.ThemeDetailList.length > 0 ? (
            <ObserverText tKey="more" type="more" />
          ) : null}
        </View>
        <ObserverText
          tKey={item.Describe}
          type="desc"
          numberOfLines={1}
          ellipsizeMode="tail"
        />
        {Array.isArray(item.ThemeDetailList) &&
        item.ThemeDetailList.length > 0 ? (
          <View style={{marginTop: dpw12}}>
            <GridThree
              list={item.ThemeDetailList}
              type={1}
              itemWidth={dpw122}
              navigation={navigation}
            />
          </View>
        ) : (
          <Empty />
        )}
      </ObserverView>
    );
  };

  return (
    <ObserverView
      style={{flex: 1, paddingBottom: dpw12}}
      themeStyle={{backgroundColor: 'color_12'}}>
      <ObserverView>
        <Header title="themeSelection" navigation={navigation} />
      </ObserverView>
      <View style={styles.con}>
        {Array.isArray(modals) && modals.length > 0 ? (
          <FlatList
            data={modals}
            renderItem={_randDataItem}
            keyExtractor={item => `${item.Id}`}
            onEndReachedThreshold={0.1}
          />
        ) : (
          <Empty />
        )}
      </View>
    </ObserverView>
  );
};

const styles = StyleSheet.create({
  con: {
    flex: 1,
  },
});

export default ThemeSelected;
